import Loading from '@/components/Loading'
import { createApp } from 'vue'

export default {
  /**
   * 指令绑定的dom元素挂载到页面后触发
   * @param {*} el 指令绑定的dom元素
   * @param {*} binding  指令绑定的值以及配置项信息
   */
  mounted(el, binding) {
    // 为了获取到loading组件内的dom元素
    let loadApp = createApp(Loading)
    let instance = loadApp.mount(document.createElement('div'))
    // 添加dom元素到页面需要真实的dom   instance.$el 就是loading组件内的DOM元素
    el.instance = instance.$el
    if (binding.value) append(el)
  },
  // 指令绑定的值发生变化时触发
  updated(el, binding) {
    binding.value ? append(el) : remove(el)
  }
}
function append(el) {
  // 获取被绑定元素的全部样式
  let allStyle = getComputedStyle(el)
  let arr = ['absolute', 'fixed', 'relative']
  if (arr.indexOf(allStyle.position) === -1) el.style.position = 'relative'

  // 给指定绑定的dom元素内，添加一个loading元素容器
  el.appendChild(el.instance)
}

function remove(el) {
  // 移除loading元素节点
  el.removeChild(el.instance)
}
